<template>
    <view>
        <view>
            <NavBar title="账号与安全" @back="goBack" />
        </view>
        <view class="list">
            <view class="list-item" @click="redirect">

                <view class="item-title">
                    <text>修改密码</text>
                </view>
                <view class="item-title">
                    <uv-icon name="arrow-right"></uv-icon>
                </view>

            </view>
            <!-- <view class="list-item" @click="unsubscribe">
                <view class="item-title">
                    <text>注销账号</text>
                </view>
                <view class="version-text">
                    <text>建设中</text>
                </view>
                <view class="item-title">
                    <uv-icon name="arrow-right"></uv-icon>
                </view>

            </view> -->
        </view>
        <uv-modal ref="modal" :showCancelButton=true title="确定注销？" content='注销后，当前账号不可用。' cancelText="再想想"
            confirmText="确定注销" width="540rpx" align="center" confirmColor="#FF3B30" ancelColor="#165DFF"
            @confirm="confirm" @cancel="cancel">
        </uv-modal>
    </view>

</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
export default {
    components: { NavBar },
    data() {
        return {

        };
    },
    methods: {
        redirect() {
            uni.navigateTo({
                url: '/pages/changePassword/index'
            })
        },
        unsubscribe() {
            // this.$refs.modal.open();
            //建设中
            uni.showToast({
                title: '建设中',
                icon: 'none'
            })
        },
        cancel() {

        },
        confirm() {

        },
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.list {
    padding: 0 40rpx;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #E5E6EB;
}

.item-title {
    display: flex;
    align-items: center;
    padding: 40rpx 0;

    .left-icon {
        margin-right: 20rpx;
    }

    .title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.85);
    }
}

.version-text {
    font-size: 28rpx;
    color: #999999;
    text-align: right;
    flex: 1;
}
</style>
